<template>
<el-container>
    <el-header>
        <h1>基于vue后台</h1>
        <el-button @click="quit" class="outUser" type="primary">退出登录</el-button>
    </el-header>

<el-container>
    <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="isRouter" @select="handleSelect" class="el-menu-vertical-demo" :collapse="isCollapse">
        <el-button @click="doCollapse" :class="isCollapse === false ? outdent : indent"></el-button>
        <el-submenu :key="key" v-for="(items,key) in menu" v-bind:items="items" :index="key+''">
            <template slot="title">
                <img :src="items.icon">
                <span slot="title">{{items.pathName}}</span>
            </template>
            <el-menu-item-group :key="key" v-for="(item,key) in items.child" :item="item">
                <el-menu-item :key="item.Id" :index="item.path">{{item.pathName}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
    <el-main>
        <transition name="routerSwitch">
            <router-view></router-view>
        </transition>
    </el-main>
</el-container>
</el-container>
</template>



<style>

.el-header{
    background-color: lightblue;
}

.el-container{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    /* overflow: hidden; */
}

.el-menu{
    max-width: 10%;
    height:100%;
    overflow: hidden;
}

.el-menu *{
    max-width: 100%;
}

.indent{
    background-image: url(../assets/indent.png);
    background-size: 100% 100%;
}


.el-header h1{
    float:left;
    margin-left:50%;
    margin-top: 15px; 
}

.el-header .outUser{
    float:left;
    margin-left:37%;
    margin-top:10px;
}

.outdent{
    background-image: url(../assets/outdent.png);
    background-size: 100% 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 55%;
    height: 100%;
}


.routerSwitch-enter-active {
  transition: all .3s ease;
}
.routerSwitch-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.routerSwitch-leave-to
  /* .routerSwitch-leave-active for below version 2.1.8 */ {
  transform: translateX(100%);
  opacity: 0;
}

</style>

<script>
  export default {
    name:'Index',
    data() {
      return {
        isRouter:true,
        isCollapse: false,
        indent: 'indent',
        outdent: 'outdent',
        menu:[],
      };
    },
    created:function(){
        this.menu = sessionStorage.getItem('menu')?JSON.parse(sessionStorage.getItem('menu')):this.$route.query.menu
        // console.log(this.menu)
    },
    methods: {
      handleSelect(key,keyPath){
          console.log(this.$router)
        //   this.$router.push(keyPath[1])
      },
      doCollapse: function(){
          this.isCollapse = !this.isCollapse
      },
      quit: function(){
          sessionStorage.clear();
          this.$router.push('/login')
      }
    }
  }
</script>